<template>
  <div class="kline_page">
    <!-- 头部 -->
    <CommonHeader title="BTC" :isTitle="true">
      <template v-slot:center>
        <div class="title" @click="goPage('/market/kline/menu')">
          <img src="@/assets/deal/menu_icon.png" alt="" />
          <span style="margin-left: 10px">BTC/USDT</span>
        </div>
      </template>
      <template v-slot:right>
        <el-icon size="24"><Star /></el-icon>
      </template>
    </CommonHeader>
    <!-- 主内容 -->
    <div class="kline_content page_no_tab_bar">
      <!-- 顶部数据 -->
      <TopData :tickers="tickers" />
      <!-- header 头部 -->
      <ul class="header_list">
        <li
          v-for="(item, index) in [5, 15, 30, 60]"
          :key="index"
          @click="changeHeaderIndex(index)"
          :class="{ actived: curActivedHeaderIndex == index }"
        >
          {{ item }}分
        </li>
        <li>
          <span>更多</span>
          <el-icon><CaretBottom /></el-icon>
        </li>
      </ul>
      <!-- k 线 -->
      <Kline />
      <!-- tab 头部 -->
      <ul class="tab_header">
        <li
          v-for="(item, index) in tabList"
          :key="index"
          @click="changeTab(index)"
        >
          <span :class="{ actived: curActivedIndex == index }">{{
            item.text
          }}</span>
          <div :class="{ border_bottom: curActivedIndex == index }"></div>
        </li>
      </ul>
      <!-- tab 内容 -->
      <ul class="tab_content">
        <li class="first font_color">
          <p>买</p>
          <p>卖</p>
        </li>
        <li v-for="(item, index) in 10" class="font_color">
          <div>
            <p>278.254</p>
            <p class="add_number">288.5</p>
          </div>
          <div>
            <p class="cut_number">275.2</p>
            <p>288.578</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 底部操作按钮 -->
    <div class="opt_btns">
      <div class="success_btn" @click="goPage('/deal')">买入</div>
      <div class="delete_btn" @click="goPage('/deal')">卖出</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import CommonHeader from "@/components/CommonHeader.vue";
import TopData from "./components/TopData.vue";
import Kline from "./components/Kline.vue";
import { getTickers } from "@/api/assort";
import { useUserInfo } from "@/stores/userInfo";

// 获取路由对象
const router = useRouter();
const route = useRoute();
const user = useUserInfo();
// 当前高亮的 tab
const curActivedHeaderIndex = ref(0);
const curActivedIndex = ref(0);
const curSymbol: any = ref("");
const tickers = ref({
  high24h: 0,
  vol24h: 0,
  low24h: 0,
  volCcy24h: 0
})
// tab 列表
const tabList = ref([
  { text: "委托订单" },
  { text: "最新成交" },
  { text: "交易数据" },
  { text: "币种信息" },
]);

// 切换 header
const changeHeaderIndex = (index: number) => {
  curActivedHeaderIndex.value = index;
};
const changeTab = (index: number) => {
  curActivedIndex.value = index;
};

// 前往指定页
const goPage = (path: string) => {
  router.push(path);
};

// 获取数据
const getData = () => {
  curSymbol.value = route.query.symbol
  getTickers({ symbol: curSymbol.value, userId: user.userInfo.userId }).then(
    (res: any) => {
      tickers.value =  res.data
    }
  );
};

onMounted(() => {
  getData()
});
</script>

<style lang="scss" scoped>
.kline_page {
  margin-bottom: 74px;
  .title {
    display: flex;
    align-items: center;
  }
  .kline_content {
    padding-top: 10px;
    .header_list {
      margin: 20px 0;
      color: #babcbf;
      display: flex;
      justify-content: space-between;
      text-align: center;
      li {
        flex: 1;
        padding: 5px 10px;
      }
      .actived {
        color: #ffffff;
        background-color: #141515;
        border-radius: 5px;
      }
    }
    .tab_header {
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      color: #babcbf;
      li {
        position: relative;
        margin-right: 30px;
        .actived {
          color: #ffffff;
        }
        .border_bottom {
          position: absolute;
          top: 28px;
          left: 50%;
          transform: translateX(-50%);
          width: 50px;
          height: 3px;
          background: linear-gradient(to right, #14da62, #0d5eae);
        }
      }
    }
    .tab_content {
      li {
        display: flex;
        justify-content: space-between;
        & > div {
          flex: 1;
          display: flex;
          justify-content: space-between;
          margin-right: 5px;
          p {
            flex: 1;
          }
          & > p:last-child {
            text-align: right;
          }
          .add_number {
            background-color: #2ebd8533;
          }
          .cut_number {
            background-color: #f6465d33;
          }
        }
      }
      .first {
        p {
          flex: 1;
          margin-left: 5px;
        }
        p:first-child {
          margin-left: 0px;
        }
      }
    }
  }
  .opt_btns {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 20px;
    background-color: #030303;
    div {
      padding: 5px;
      flex: 1;
      text-align: center;
      margin: 0 10px;
      border-radius: 5px;
    }
  }
}
</style>
